<template>
  <!-- <v-scale-screen :width="390" > -->
  <div id="left" class="left" :style="{ left: isShow ? '0px' : '-390px' }">
    <div class="left-box">
      <div class="big-tit">
        <!-- <img src="@/assets/tit-bg.png" style="width: 350px;height: 30px;margin-top: 4px;" /> -->
        <div style="font-weight: bold; width: 90%; height: 32px;padding-left: 10px;">危防统计</div>
      </div>
      <div class="big-content" style="width: 100%; height: 33%; margin-top: 5px">
        <div class="tit" style="margin-left: 10px">
          <div style="width: 3.5px; color: #226dc4; background-color: #226dc4">
            &nbsp;
          </div>
          <div class="tit-name" style="
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: space-around;
              line-height: 20px;
            ">
            <div style="font-size: 13px" class="title">
              <button class="btnStyle" style="
                  font-size: 14px;
                  margin-right: 6px;
                  padding: 3px;
                  width: 68px;
                " @click="() => {
                    this.tabList = 'TabLead';
                    this.getLeading();
                  }
                  " :class="{
                  btnActive: tabList == 'TabLead',
                }">
                铅封
              </button>
              <button class="btnStyle" style="
                  font-size: 14px;
                  margin-right: 6px;
                  padding: 3px;
                  width: 68px;
                " @click="getdelivery()" :class="{ btnActive: tabList == 'TabPoll' }">
                污染物
              </button>

              <button class="btnStyle" style="
                  font-size: 14px;
                  margin-right: 6px;
                  padding: 3px;
                  width: 68px;
                " @click="fetchData()" :class="{ btnActive: tabList == 'TabAn' }">
                岸电
              </button>
              <button class="btnStyle" style="
                  font-size: 14px;
                  margin-right: 6px;
                  padding: 3px;
                  width: 68px;
                " @click="washData()" :class="{ btnActive: tabList == 'TabWash' }">
                洗舱
              </button>
            </div>
          </div>
        </div>
        <div class="big-content" style="height: 95%" v-show="tabList == 'TabLead'">
          <div style="display: flex; justify-content: space-around" class="title">
            <button class="btnStyle" style="font-size: 14px" :class="{ btnActive: isLead == 'Leading' }"
              @click="getLeading">
              实时铅封
            </button>
            <button class="btnStyle" style="font-size: 14px" :class="{ btnActive: isLead == 'LeadCount' }"
              @click="leadCountEchart">
              铅封总量
            </button>
          </div>

          <div v-show="isLead == 'Leading'" style="width: 100%; height: 90%; margin-top: 5px">
            <div style="
                width: 100%;
                height: 100%;
                /* margin-top: 5px;
              display: flex;
              justify-content: center;
              align-items: center; */
              ">
              <div style="
                  width: 99%;
                  height: 90%;
                  max-height: 176px;
                  margin: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                " ref="showPie"></div>
            </div>
          </div>
          <div v-show="isLead == 'LeadCount'" style="width: 100%; height: 100%; margin-top: 0px">
            <div style="
                /* background: linear-gradient(90deg,rgba(60,149,255,.15),rgba(60,149,255,.035)); */
                width: 100%;
                height: 90%;
                display: flex;
                justify-content: center;
                align-items: center;
              ">
              <div style="
                  width: 100%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                " ref="echartsLead"></div>
            </div>
          </div>
        </div>
        <div class="big-content" style="height: 88%;width: 90%;" v-show="tabList == 'TabPoll'">
          <div style="
              width: 100%;
              height: 100%;
              /* margin-top: 5px; */
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            ">
            <div style="width: 209px;float: right;height: 22px;">
              <el-date-picker v-model="proDate" type="daterange" align="center" unlink-panels range-separator="至"
                start-placeholder="开始" end-placeholder="结束" :picker-options="proDateOptions">
              </el-date-picker>
            </div>
            <div style="
                width: 350px;
                height: 180px;
                margin-top: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
              " ref="shorePower"></div>
          </div>
        </div>
        <div class="big-content" style="height: 88%" v-show="tabList == 'TabAn'">
          <div style="width: 100%; height: 100%; margin-bottom: 15px">
            <div style="margin-top: 10px" class="title">
              <button v-for="(item, index) in chartBtn" :key="index" style="font-size: 14px" @click="showAnList(index)"
                class="btnStyle" :class="{ btnActive: TabAn === index }">
                {{ item }}
              </button>
            </div>
            <div class="content" style="
                display: flex;
                justify-content: center;
                align-items: center;
                width: 99%;
                height: 85%;
              ">
              <div style="
                  width: 350px;
                  height: 140px;
                  display: flex;
                  padding-left: 10px;
                  align-items: center;
                  justify-content: center;
                " ref="shoreAn"></div>
            </div>
          </div>
        </div>
        <div class="big-content" style="height: 100%" v-show="tabList == 'TabWash'">
          <div style="width: 100%; height: 88%; margin-bottom: 11px">
            <div class="tit" style="justify-content: flex-end">
              <!-- <div style="width: 3px; color: #226dc4; background-color: #226dc4">
              &nbsp;
            </div> -->
              <!-- <div class="tit-name">洗舱量</div> -->
              <div style="width: 25%">
                <el-select v-model="selectMonth" placeholder="请选择" size="mini" style="margin-top: 2px"
                  @change="washData">
                  <el-option v-for="item in monthList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="content" style="height: 90%; overflow-y: scroll">
              <div v-for="item in washCountList">
                <div style="padding: 0 5px; margin-top: 1px">
                  <div style="font-size: 15px; position: relative">
                    <!-- <a > {{ item.name }}</a> -->
                    <span @click="tonSite(item.site)" style="cursor: pointer;" >{{ item.name }}</span>
                    <span style="position: absolute; right: 0">
                      <span style="
                          color: #2bfbfd;
                          font-weight: bold;
                          font-size: 15px;
                        ">{{ item.count }}</span>艘
                    </span>
                  </div>
                  <el-progress style="margin-top: 10px" :show-text="false" :percentage="item.rate"></el-progress>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="big-content" style="height: 40%; margin-top: 10px">

        <div class="tit" style="margin-left: 0px; margin-bottom: 5px">
          <div style="width: 3.5px; color: #226dc4; background-color: #226dc4">
            &nbsp;
          </div>
          <div class="tit-name" style="
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              line-height: 20px;
            ">
            <div style="font-size: 13px" class="title">
              <button @click="showWait(true)" style="font-size: 14px" class="btnStyle" :class="{
                btnActive: activeTab == 'waitList',
              }">
                待铅封船舶
              </button>
              <button @click="showBlacklist" class="btnStyle" style="font-size: 14px"
                :class="{ btnActive: activeTab == 'blacklist' }">
                黑名单船舶
              </button>

              <button @click="showCList" class="btnStyle" style="font-size: 14px"
                :class="{ btnActive: activeTab == 'CList' }">
                C级船舶
              </button>
            </div>
            <div style="
                width: 50px;
                font-size: 12px;
                line-height: 30px;
                cursor: pointer;
              " @click="getMore()">
              <i class="el-icon-search"></i> 更多
            </div>
          </div>
        </div>
        <div class="content" style="height: 90%">
          <div style="
              background: #445b927a;
              width: 348px;
              height: 1px;
              gap: 0px;
              opacity: 0px;
            "></div>
          <div class="table-header">
            <span style="padding-left: 5px; flex: 1">船舶名称</span>
            <span style="padding-left: 5px; flex: 1">船舶识别号</span>
            <span style="padding-left: 5px; flex: 1">MMSI</span>
          </div>
          <div style="padding: 5px 0">
            <vue-seamless-scroll :data="allData" :class-option="classOption" ref="vueSeamlessRef"
              class="scroll-list-seamless">
              <div class="item-container">
                <div v-for="(item, index) in allData" :key="index" class="item">
                  <div style="overflow: hidden" class="ship-name" v-text="item.shipName"></div>
                  <div style="margin-top: 8px">
                    <img src="@/assets/Line.png" />
                  </div>
                  <div class="ship-id" v-text="item.shipId"></div>
                  <div style="margin-top: 8px">
                    <img src="@/assets/Line.png" />
                  </div>
                  <div style="
                      flex: 1;
                      display: flex;
                      justify-content: space-around;
                      align-items: center;
                    ">
                    <div v-text="item.mmsi"></div>
                    <div style="" class="position-icon" @click.stop="toship(item)">
                      <img src="@/assets/tubiao.png" />
                    </div>
                  </div>
                </div>
                <div v-if="showList" style="
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 80%;
                    height: 80%;
                    margin: auto auto;
                  ">
                  <img src="@/assets/kong.png" alt="" style="width: 20%; height: 20%" />
                  <div style="margin-top: 10px">暂无数据</div>
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="big-content" style="height: 40%; margin-top: 10px">
        <div class="tit" style="margin-left: 0px; margin-bottom: 5px">
          <div style="width: 3.5px; color: #226dc4; background-color: #226dc4">
            &nbsp;
          </div>
          <div class="tit-name" style="
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              line-height: 20px;
            ">
            <span>新能源船舶</span>
            <toggleComponents :components="leftBottomComponents"></toggleComponents>
          </div>
        </div>
        <template v-for="(item, index) in leftBottomComponents" v-show="item.isActive" class="component-container">
          <component :is="item.component" v-if="item.isActive" :key="index"></component>
        </template>
      </div>
      <!-- <div class="big-content" style="width: 98%; height: 28%; margin-top: 4px">

        <div class="tit" style="margin-left: 5px">
          <div style="width: 3.5px; color: #226dc4; background-color: #226dc4">
            &nbsp;这个
          </div>
          <div
            class="tit-name"
            style="
              height: 30px;
              display: flex;
              align-items: center;
              line-height: 20px;
            "
          >
            <div style="font-size: 13px" class="title">
              <button
                class="btnStyle"
                style="font-size: 14px; margin-right: 6px; padding: 3px"
                @click="getCount()"
                :class="{
                  btnActive: tabCCTV == 'TabCount',
                }"
              >
                告警总数
              </button>
              <button
                style="font-size: 14px; margin-right: 6px; padding: 3px"
                class="btnStyle"
                @click="getClass()"
                :class="{ btnActive: tabCCTV == 'TabClass' }"
              >
                告警分类
              </button>
            </div>
          </div>
        </div>
        <div
          class="big-content"
          style="height: 80%"
          v-show="tabCCTV == 'TabCount'"
        >
          <div style="width: 100%; height: 100%; margin-bottom: 11px">

            <div
              style="
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              "
            >
              <div class="sum_content">
                <div style="flex: 1; display: flex">
                  <img
                    style="
                      text-align: center;
                      margin-top: 20px;
                      margin-left: 5px;
                    "
                    height="38"
                    width="36"
                    src="@/assets/alarm_sum.png"
                  />
                  <div style="margin-left: 10px; margin-top: 20px; float: left">
                    <div style="font-size: 15px" ref="alarmSum"></div>
                    <div
                      style="font-size: 15px; color: #e1e1e1; margin-top: 5px"
                    >
                      告警总数
                    </div>
                  </div>
                </div>
                <div style="flex: 1">
                  <div style="flex: 1; display: flex">
                    <img
                      style="
                        text-align: center;
                        margin-top: 5px;
                        margin-left: 5px;
                      "
                      height="25"
                      width="25"
                      src="@/assets/alarm_handle.png"
                    />
                    <div style="margin-left: 10px; float: left">
                      <div style="font-size: 15px" ref="handleAlarm"></div>
                      <div
                        style="font-size: 15px; color: #e1e1e1; margin-top: 5px"
                      >
                        已处置告警
                      </div>
                    </div>
                  </div>
                  <div style="flex: 1; display: flex; margin-top: 10px">
                    <img
                      style="
                        text-align: center;
                        margin-top: 5px;
                        margin-left: 5px;
                      "
                      height="25"
                      width="25"
                      src="@/assets/alarm_unhandle.png"
                    />
                    <div style="margin-left: 10px; float: left">
                      <div style="font-size: 15px" ref="unhandleAlarm"></div>
                      <div
                        style="font-size: 15px; color: #e1e1e1; margin-top: 5px"
                      >
                        未处置告警
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="big-content"
          style="height: 80%"
          v-show="tabCCTV == 'TabClass'"
        >
          <div style="width: 100%; height: 99%; margin-bottom: 11px">

            <div
              style="
                width: 100%;
                height: 88%;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
              "
            >
              <div style="width: 350px; height: 200px" ref="alarmClass"></div>
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <div id="showButton" class="showButton" @click="toggleLeftPanel">
      {{ isShow ? "关闭" : "展开" }}
    </div>
    <div v-if="VisibleCMore" class="more">
      <el-dialog class="check" :title="moreTitle" :visible.sync="VisibleCMore" :modal-append-to-body="false" width="80%"
        @close="closeMore">

        <el-table :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" ref="multipleTable"
          height="300" :data="tableMoreData" tooltip-effect="dark" style="width: 100%">
          <el-table-column type="index" fixed="left" label="序号" width="70">
          </el-table-column>
          <el-table-column prop="shipName" label="船舶名称" width="130">
          </el-table-column>
          <el-table-column prop="shipId" label="船舶识别号" width="180">
          </el-table-column>
          <el-table-column prop="mmsi" label="船舶MMSI" width="180">
          </el-table-column>

          <el-table-column prop="zip" fixed="right" label="操作" width="70">
            <template slot-scope="scope">
              <div style="" class="position-icon" @click.stop="toship(scope.row)">
                <img src="@/assets/tubiao.png" />
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          ">
          <el-pagination @current-change="handleCurrentChangeMore" :current-page.sync="MorePage.pageNum"
            :page-size="MorePage.pageSize" layout="total, prev, pager, next" :total="moreTotal">
          </el-pagination>
          <el-button :disabled="moreTotal == 0" @click="exportTable()" type="success" style="
              height: 24px;
              width: 74px;
              font-size: 13px;
              display: flex;
              align-items: center;
              justify-content: center;
            ">
            <i class="el-icon-download" style="display: inline-block; margin-right: 2px"></i>导出</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getAlarm, getType } from "../api/alarm";
import vueSeamlessScroll from "vue-seamless-scroll";
import VScaleScreen from "../components/scale-screen.vue";
import shipDynamics from "../components/newEnergyShip/shipDynamics.vue";
import shipTypes from "@/components/newEnergyShip/shipTypes.vue";
import shipRegistry from "@/components/newEnergyShip/shipRegistry.vue";
import shipPosition from "@/components/newEnergyShip/shipPosition.vue";
import toggleComponents from "@/components/newEnergyShip/toggleComponents.vue";
import { delivery, getlead, importDetail } from "../api/list";
import tool from "@/utils/tool";
import Bottom from "./Bottom.vue";
import { color } from "echarts";
import { orgList, getOught, capacity, getSealTotal } from "../api/work";
import moment from "moment";
import * as XLSX from "xlsx";

export default {
  components: {
    vueSeamlessScroll,
    VScaleScreen,
    shipDynamics,
    shipTypes,
    shipRegistry,
    shipPosition,
    toggleComponents
  },
  name: "left",
  data() {
    return {

      proDateOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      proDate: "",
      MorePage: {
        pageSize: 10,
        pageNum: 1,
      },
      moreTotal: 0,
      moreTitle: "",
      VisibleCMore: false,
      tableMoreData: [],
      showLeadCount: false,
      showLead: true,
      isLead: "Leading",
      max3: 0,
      tabCCTV: "TabCount",
      washCountList: [],
      monthList: [],
      selectMonth: "",
      TabAn: 0,
      // 应用尽用率数据
      OughtData: [],
      // 用电数据
      apiData: [],
      chartOptions: {
        grid: {
          left: 0,
          x: 30,
          x2: 40,
          y: 20,
          right: 0,
          bottom: 0,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          // position: ['30%', '30%']
          position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else {
              // 左边放的下
              x = pointX - boxWidth;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else {
              // 上边放得下
              y = pointY - boxHeight;
            }

            if (params[0].seriesName == "应用尽用率") {
              return [x, y + 30];
              // return [point[0] - 100, '10%']
            } else {
              return [x, y - 20];
            }
          },
        },
        xAxis: [
          {
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisLabel: {
              textStyle: { color: "#c9c9c9" },
              // interval: 0
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            show: true,
            min: 0,
            max: 100,
            // max: (value)=>{
            //   console.log(value,this.TabAn)
            //   if( this.TabAn!=0){
            //     return Math.ceil(value.max + (value.max - value.min) * 0.2);
            //   }else{
            //     return 100
            //   }
            // },
            // minInterval: 1,
            // splitNumber: 6, // 设置坐标轴的分割段数
            // axisLabel: {
            //   show: true,
            //   interval: "auto",
            //   formatter: "{value}%",
            //   textStyle: { color: "#c9c9c9" },
            //   // textStyle: { color: "#c9c9c9" },
            // },
            axisTick: {
              show: false,
            },
            splitLine: {
              // 网格线
              show: true,
            },
          },
          {
            type: "value",
            show: false,
            axisLabel: {
              show: true,
              interval: "auto",
              formatter: "{value}%",
              textStyle: { color: "#c9c9c9" },
            },
            // axisLabel: {
            //   show: false,
            //   textStyle: { color: "#c9c9c9" },
            // },
            splitLine: {
              lineStyle: {
                color: "#164a73", // 改变折线颜色
              },
            },
            min: 0,
            max: 100,
            interval: 25,
            splitNumber: 6, // 设置坐标轴的分割段数
          },
        ],
        // legend: {
        //   orient: "horizontal",
        //   bottom: 10,
        //   left: 0,
        //   data: ["应用尽用率", "用电时长", "用电艘次", "用电度数"],
        //   textStyle: {
        //     color: "#ffffff",
        //     fontSize: 11,
        //   },
        // },
        series: [
          {
            type: "line",
            showSymbol: false,
            name: "应用尽用率",
            tooltip: {
              valueFormatter: function (value) {
                return value + "%";
              },
            },
            yAxisIndex: 1,
            data: [],
            smooth: true,
            itemStyle: {
              normal: {
                color: "#5ff62c", // 改变折线点的颜色
                lineStyle: {
                  color: "#5ff62c", // 改变折线颜色
                },
              },
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#9de385", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "transparent", // 100% 处的颜色
                  },
                ]), // 背景渐变色
              },
            },
          },
          {
            axisLabel: {
              show: true,
              textStyle: {
                color: "#234e75",
              },
            },
            type: "line",
            tooltip: {
              valueFormatter: function (value) {
                return value + "万/小时";
              },
            },
            showSymbol: false,
            name: "用电时长",
            data: [],
            // data: [230, 269, 300, 330, 310, 344, 355, 341, 325, 412, 500, 300],
            smooth: true,
            itemStyle: {
              normal: {
                color: "#f65c2c", // 改变折线点的颜色
                lineStyle: {
                  color: "#f65c2c", // 改变折线颜色
                },
              },
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#de8e75", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "transparent", // 100% 处的颜色
                  },
                ]), // 背景渐变色
              },
            },
          },
          {
            type: "line",
            showSymbol: false,
            name: "用电艘次",
            tooltip: {
              valueFormatter: function (value) {
                return value + "万次";
              },
            },
            data: [],
            // data: [323, 352, 445, 455, 433, 411, 393, 450, 489, 532, 555, 529],
            smooth: true,
            itemStyle: {
              normal: {
                color: "#1c69fe", // 改变折线点的颜色
                lineStyle: {
                  color: "#1c69fe", // 改变折线颜色
                },
              },
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#537fd3", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "transparent", // 100% 处的颜色
                  },
                ]), // 背景渐变色
              },
            },
          },
          {
            type: "line",
            showSymbol: false,
            name: "用电度数",
            tooltip: {
              valueFormatter: function (value) {
                return value + "万/度";
              },
            },
            data: [],
            // data: [456, 436, 428, 392, 372, 349, 322, 310, 300, 234, 232, 300],
            smooth: true,
            itemStyle: {
              normal: {
                color: "#cd2bf7", // 改变折线点的颜色
                lineStyle: {
                  color: "#cd2bf7", // 改变折线颜色
                },
              },
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#e080f8", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "transparent", // 100% 处的颜色
                  },
                ]), // 背景渐变色
              },
            },
          },
        ],
      },
      chartBtn: ["应用尽用率", "用电时长", "用电艘次", "用电度数"],
      shorePowerChart: null,
      sliceData: [],
      inter: null, //定时器
      setInter: null, //页面刷新数据
      isShow: true,
      enterDeptCode: "", //用户部门
      selectHas: "", //机构
      showList: false,
      tabList: "TabLead",
      hasList: [
        { label: "芜湖海事局", value: "119" },
        { label: "重庆海事局", value: "122" },
        { label: "安庆海事局", value: "126" },
        { label: "三峡海事局", value: "127" },
        { label: "宜昌海事局", value: "128" },
        { label: "泸州海事局", value: "129" },
        { label: "荆州海事局", value: "131" },
        { label: "岳阳海事局", value: "132" },
        { label: "宣宾海事局", value: "164" },
        { label: "黄石海事局", value: "191" },
        { label: "九江海事局", value: "197" },
        { label: "武汉海事局", value: "276" },
      ],
      classOption: {
        singleHeight: 50,
        step: 0.3,
      },
      wait_seal_list: [],
      c_ship_list: [],
      back_list: [],

      activeTab: "waitList", // 默认显示待铅封船舶数据
      allData: [],
      optionData: [],

      // 污染交付统计数据
      deliveryData: {
        grid: {
          x: 40,
          top: 30,
          left: 0,
          bottom: 30,
          right: 0,
        },
        legend: {
          right: "5%",
          data: ["立方米", "公斤"],
          selected: {
            // 默认选中所有图例项
            立方米: true,
            公斤: true,
          },
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          formatter: (params) => {
            params.value = params.value
              .toString()
              .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            console.log(params.value);
            // 获取xAxis data中的数据
            //  if(true){
            //   return '<div>'+params.name + '<br>' + params.marker+params.name + ':' + '<span ">'+params.value + '(万)'+'</span>'+'</div>';

            //  }
            return (
              "<div>" +
              params.marker +
              params.name +
              ":" +
              '<span ">' +
              params.value +
              "</span>" +
              "</div>"
            );
          },
        },

        xAxis: [
          {
            type: "category",
            data: [
              "生活污水",
              "生活垃圾",
              "含油污水",

              "残油废油",
              // "生\n活\n垃\n圾",
              // "含\n油\n污\n水",
              // "生\n活\n污\n水",
              // "残\n油\n废\n油",
            ],
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 13,
              },
            },
            triggerEvent: true,
          },
        ],
        yAxis: [
          {
            type: "value",
            // min: 0,
            // max: 0,
            //       max: function(value) {
            //   // 以data中最大值+差值的0.2作为y轴最大值，这样会好看点，系数可以按照需要调整
            //   return Math.ceil(value.max + (value.max - value.min) * 0.2);
            // },
            // interval: 15,
            // minInterval:100,
            splitLine: { show: false },
          },
        ],
        series: [
          {
            // name: "立方米",
            type: "bar",
            // yAxisIndex: 0,
            data: [],
            barWidth: 40,
            itemStyle: {
              normal: {
                color: "#6485CA",
                // barBorderRadius: [10, 10, 0, 0], //依次表示 左上，右上，右下、左下
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#aaa",
                    fontSize: 14,
                  },
                },
              },
            },
            stack: "total",
            barMinHeight: 5,
            // textStyle:{
            //   fontSize: 13,
            // }
          },
          // {
          //   name: "公斤",
          //   type: "bar",
          //   yAxisIndex: 1,
          //   data: [],
          // },
        ],
      },
      // 左下侧组件
      leftBottomComponents: [
        { isActive: true, component: 'shipDynamics' },
        { isActive: true, component: 'shipTypes' },
        { isActive: false, component: 'shipRegistry' },
        { isActive: false, component: 'shipPosition' }
      ]
    };
  },
  methods: {
    // 洗舱站定位
    tonSite(site) {
     

      if(window.microApp){
        // const global = window.microApp.getGlobalData()
        // global.PUBLIC_METHODS.getSource('HD_XCZ')
        const obj = {
          ...site,
          zoom: 16,
        };
        console.log('定位',obj)
        const globalData = window.microApp.getGlobalData();
        globalData.PUBLIC_METHODS.changeLayer_WB(true,'HD_XCZ','element')
      // globalData.PUBLIC_METHODS.getSource('HD_XCZ')
       globalData.PUBLIC_METHODS.childFlyTo(JSON.stringify(obj));

      }
    },
    // 导出
    async exportTable() {
      let obj = {};
      if (this.activeTab == "waitList") {
        obj = {
          pageNum: 1,
          pageSize: this.moreTotal,
          orgCode: this.selectHas,
          type: 0,
        };
      } else if (this.activeTab == "blacklist") {
        obj = {
          pageNum: 1,
          pageSize: this.moreTotal,
          orgCode: this.selectHas,
          type: 1,
        };
      } else if (this.activeTab == "CList") {
        obj = {
          pageNum: 1,
          pageSize: this.moreTotal,
          orgCode: this.selectHas,
          type: 2,
        };
      }
      let res = await importDetail(obj);
      let dataexport = res.data.list;
      //  console.log(res)

      let exportData = [];
      //  导出数据结构构造
      dataexport.forEach((item, index) => {
        // console.log(item,index)

        exportData.push({
          sort: index + 1,
          shipId: item.shipId ? item.shipId : "",
          shipName: item.shipName ? item.shipName : "",
          mmsi: item.mmsi ? item.mmsi : "",
        });
      });
      //导出表头设计
      let head = {
        sort: "序号",
        shipName: "船舶名称",
        shipId: "船舶识别号",
        mmsi: "船舶MMSI",
      };
      //表头数据切换
      const list = exportData.map((item) => {
        const obj = {};
        for (const k in item) {
          if (head[k]) {
            obj[head[k]] = item[k];
          }
        }
        return obj;
      });
      // 创建工作表
      const data = XLSX.utils.json_to_sheet(list);
      // 创建工作簿
      const wb = XLSX.utils.book_new();
      // 将工作表放入工作簿中
      XLSX.utils.book_append_sheet(wb, data, "data");
      // 生成文件并下载
      XLSX.writeFile(wb, this.moreTitle + "明细.xlsx");
    },
    // 更多
    getMore() {
      this.VisibleCMore = true;
      // 待铅封船舶
      if (this.activeTab == "waitList") {
        this.moreTitle = "待铅封船舶";
        let data = {
          pageNum: this.MorePage.pageNum,
          pageSize: 10,
          orgCode: this.selectHas,
          // orgCode: "1001",
          type: 0,
        };
        importDetail(data).then((res) => {
          this.tableMoreData = res.data.list;
          this.moreTotal = res.data.total;
        });
      } else if (this.activeTab == "blacklist") {
        // 黑名单船舶
        this.moreTitle = "黑名单船舶";
        let data = {
          pageNum: this.MorePage.pageNum,
          pageSize: 10,
          orgCode: this.selectHas,
          // orgCode: "1001",
          type: 1,
        };
        importDetail(data).then((res) => {
          this.tableMoreData = res.data.list;
          this.moreTotal = res.data.total;
        });
      } else if (this.activeTab == "CList") {
        // C级船舶
        this.moreTitle = "C级船舶";
        let data = {
          pageNum: this.MorePage.pageNum,
          pageSize: 10,
          orgCode: this.selectHas,
          // orgCode: "1001",
          type: 2,
        };
        importDetail(data).then((res) => {
          this.tableMoreData = res.data.list;
          this.moreTotal = res.data.total;
        });
      }
      console.log(this.activeTab);
    },
    handleCurrentChangeMore(val) {
      this.MorePage.pageNum = val;
      this.getMore();
    },
    closeMore() {
      this.MorePage = {
        pageNum: 1,
        pageSize: 10,
      };
    },
    getLeading() {
      this.isLead = "Leading";
      this.drawAlarmType();
    },
    async leadCountEchart() {
      this.isLead = "LeadCount";
      let res = await getSealTotal({ orgCode: this.selectHas });

      let ecahrt = this.$echarts.init(this.$refs.echartsLead);
      let option;
      option = {
        tooltip: {
          trigger: "item",
          // formatter: (params) => {

          //     let s = params.marker + params.seriesName;
          //     let k = option.series[params.seriesIndex].pieData.value;
          //   return s + ":\n" + k;

          // },
        },
        legend: {
          left: 10,
          // top:0,
          // right:0,
          bottom: 10,
          // x: "left", //可设定图例在左、右、居中
          // y: "bottom", //可设定图例在上、下、居中
          orient: "vertical",
          padding: [0, 5],
          textStyle: {
            color: "#fff",
            fontSize: 12.5,
            fontWeight: "400",
          },
          color: [
            // "#7CFC00",
            // "#00FFFF",
            // "#00FFFF",
          ],
          data: ["铅封总量"],
        },
        series: [
          {
            // hoverAnimation: false,
            // silent: false,
            // name: "Access From",
            type: "pie",
            center: ["65%", "50%"],
            radius: ["45%", "68%"],
            // avoidLabelOverlap: false,
            // padAngle: 5,
            itemStyle: {
              // color:'#fff',
              borderRadius: 10,
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            label: {
              show: true,
              opacity: 1,
              color: "#fff",
              fontSize: 13,
              formatter: (val) => {
                let name = val.data.name;
                let value = val.data.value;
                console.log(val, 234234, name, value);
                return name + ":\n" + value;
              },
            },
            data: [
              // { value: 1048, name: "Search Engine" },
              // { value: 735, name: "Direct" },
              // { value: 580, name: "Email" },
              // { value: 484, name: "Union Ads" },
              // { value: 300, name: "Video Ads" },
            ],
          },
          {
            // name: 'Access From',
            type: "pie",
            selectedMode: "single",
            center: ["65%", "50%"],
            radius: ["30%", "20%"],
            label: {
              show: false,
              opacity: 1,
              color: "#fff",
              fontSize: 13,
            },
            labelLine: {
              show: false,
            },
            data: [{ value: "", name: "铅封总量" }],
          },
        ],
      };
      console.log(res);
      let type = res.data.type;
      let sum = 0;
      res.data.count.forEach((item, index) => {
        let obj = {
          value: item,
          name: type[index],
          itemStyle: {
            color: index == 0 ? "#7CFC00" : "#00FFFF",
            borderRadius: 10,
          },
        };
        sum += Number(item);
        option.series[0].data.push(obj);
        option.legend.data.push(type[index]);
      });
      option.series[1].data[0].value = sum;
      option.series[1].data[0].itemStyle = {
        color: "#ffff00",
      };
      console.log(option.legend.data);
      ecahrt.clear();
      option && ecahrt.setOption(option);
    },
    getLine(max) {
      this.max3 = Math.floor(max / 5);
      //  console.log(222222,this.max3)
    },
    async getCount() {
      console.log(222, this.isLead);
      this.tabCCTV = "TabCount";
      let res = await getAlarm();
      this.$refs.alarmSum.innerHTML = res.totalAlarmCount;
      this.$refs.handleAlarm.innerHTML = res.handledAlarmCount;
      this.$refs.unhandleAlarm.innerHTML = res.unhandledAlarmCount;

      // console.log(this.tabCCTV);
    },
    async getClass() {
      console.log(222, this.isLead);
      this.tabCCTV = "TabClass";
      let res = await getType();
      this.drawAlarmClass(res);
      // console.log(res)
    },
    // 告警总类
    async drawAlarmClass(res) {
      this.alarmTypeChart = this.$echarts.init(this.$refs.alarmClass);

      // 告警总数
      // let res=await getType()
      // console.log(res,'告警总类')
      const option = {
        title: {
          text: "",
          subtext: "",
          x: "74%",
          y: "48%",
          subtextStyle: {
            fontSize: 16,
            lineHeight: 15,
            fontWeight: 600,
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          // 图例
          itemHeight: 15,
          data: [
            // "未穿救生衣",
            // "玩手机",
            // "救生衣、工作服未穿",
            // "未戴安全帽、未穿救生衣与工作衣",
          ],
          orient: "vertical",
          x: "left", //可设定图例在左、右、居中
          y: "bottom", //可设定图例在上、下、居中
          padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          textStyle: {
            //图例文字的样式
            color: "#ccc",
            fontSize: 13,
          },
        },
        // graphic: [
        //   {
        //     //环形图中间添加文字
        //     type: "text", //通过不同top值可以设置上下显示
        //     left: "center",
        //     top: "center",
        //     style: {
        //       // text: `总数 ${this.ring6}`,
        //       textAlign: "center",
        //       // fill: "#1E7CE8", //文字的颜色
        //       fontSize: 20,
        //       lineHeight: 20,
        //     },
        //   },
        // ],
        series: [
          {
            radius: ["50%", "80%"],
            center: ["80%", "60%"],
            type: "pie",
            label: {
              show: false,
              // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
              // normal: {
              //   show: false, // 是否显示标签[ default: false ]
              //   position: "inside", // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
              //   // formatter: "{b} : {c}", // 标签内容
              //   formatter: function (params) {
              //     // 如果名称为"未戴安全帽、未穿救生衣与工作衣"，则添加换行符
              //     if (params.name === "未戴安全帽、未穿救生衣与工作衣") {
              //       return params.name.replace("、", "、\n") + params.value;
              //     } else {
              //       // 如果名称不是上述情况，则返回原始格式
              //       return params.name + params.value;
              //     }
              //   },
              //   backgroundColor: "black",
              //   padding: [3, 5],
              //   offsetCenter: [0, "30%"],
              //   textStyle: {
              //     //图例文字的样式
              //     color: "#fff",
              //     fontSize: 12,
              //   },
              // },
            },
            data: [
              // {
              //   value: 643,
              //   name: "未穿救生衣",
              // },
              // {
              //   value: 492,
              //   name: "玩手机",
              // },
              // {
              //   value: 1032,
              //   name: "救生衣、工作服未穿",
              // },
              // {
              //   value: 102,
              //   name: "未戴安全帽、未穿救生衣与工作衣",
              // },
            ],
          },
        ],
      };
      let data = res.count.slice(0, 5);
      let type = res.type.slice(0, 5);
      let sum = 0;
      data.forEach((item, index) => {
        let obj = {
          value: item,
          name: type[index],
        };
        sum += item;
        option.series[0].data.push(obj);
        option.legend.data.push(type[index]);
        option.title.subtext = sum;
        console.log(option.series[0].data, sum);
      });
      this.alarmTypeChart.setOption(option);
    },

    // 获取月份
    initializeMonthList() {
      const currentMonth = new Date().getMonth() + 1;
      this.selectMonth = currentMonth;
      const months = [
        { name: "一月", value: "1" },
        { name: "二月", value: "2" },
        { name: "三月", value: "3" },
        { name: "四月", value: "4" },
        { name: "五月", value: "5" },
        { name: "六月", value: "6" },
        { name: "七月", value: "7" },
        { name: "八月", value: "8" },
        { name: "九月", value: "9" },
        { name: "十月", value: "10" },
        { name: "十一月", value: "11" },
        { name: "十二月", value: "12" },
      ];
      this.monthList = months.map((month, index) => {
        if (index + 1 === currentMonth) {
          return { label: "本月", value: currentMonth };
        }
        return { label: month.name, value: month.value };
      });
    },
    // 洗舱
    washData() {
      this.tabList = "TabWash";
      capacity({ month: this.selectMonth }).then((res) => {
       
        this.washCountList = res.count.map((countItem, index) => {
          let name = res.type[index];
          let rate = countItem;
          let site=this.setSton(name)
          return { name, count: countItem, rate,site };
        });
        console.log("洗舱量", this.washCountList);
      });
    },
    setSton(name){
      switch(name){
        case "武汉化学品船舶洗舱站" : return {lng:'114.567935',lat:'30.596656'};break;
        case "湖口化学品洗舱站": return {lng:'116.32684873773765',lat:'29.814697443809848'};break;
        case "岳阳港危化品船舶洗舱站" : return {lng:'113.203818',lat:'29.510874'};break;
        case "宜昌化学品船舶洗舱站" : return {lng:'111.651935',lat:'30.381876'};break;
        case "安庆市化学品船舶洗舱站" : return {lng:'117.013904',lat:'30.498461'};break;
        case "南京油运武汉分公司洗舱站" : return {lng:'114.476395',lat:'30.677763'};break;
        case "龙潭港区船舶洗舱站" : return {lng:'119.104024',lat:'32.24166'};break;
        case "川维洗舱基地" : return {lng:'107.02590418203856',lat:'29.794373743792768'};break;
        case "泽胜洗舱基地" : return {lng:'107.143431',lat:'29.718571'};break;
        case "江阴市石利港区洗舱站": return {lng:'120.10215',lat:'31.939777'};break;
        case "中化南通洗舱站" : return {lng:'120.938773',lat:'31.829314'};break;
        case "阳鸿石化洗舱站": return {lng:'120.538522',lat:'32.061362'};break;
        case "大厂港区洗舱站": return {lng:'118.850035',lat:'32.222556'};break;
      }
    },
    // 切换按钮
    fetchData() {
      this.tabList = "TabAn";
      //应用尽用率
      this.getOughtData();
      // 岸电使用情况
      orgList({
        // departNo: "1001100210101001",
        departNo: this.selectHas,
      }).then((res1) => {
        // res.data.splice(0,1)
        // res.data.splice(1,1)
        // res.data.splice(2,1)
        // res.data.splice(3,1)
        let key;
        res1.data.forEach((item1, index) => {
          if (item1.time.split("-")[0] < moment().format("YYYY")) {
            key = index;
            // res.data.splice(index,1)
          }
        });
        res1.data.splice(0, key + 1);
        this.apiData = res1.data.reverse().reverse();
        // console.log('岸电使用情况',res.data.reverse().reverse())
      });
    },
    //应用尽用率
    getOughtData() {
      getOught({
        // departNo: "1001100210101001",
        departNo: this.selectHas,
      }).then((res) => {
        let key;
        res.data.forEach((item, index) => {
          if (item.time.split("-")[0] < moment().format("YYYY")) {
            // res.data.splice(index,1)
            key = index;
          }
        });
        res.data.splice(0, key + 1);
        // console.log('应用尽用率',res.data.reverse().reverse())
        this.OughtData = res.data.reverse().reverse();
        this.showAnList(this.TabAn);
      });
    },
    // 点击按钮进行切换
    showAnList(index) {
      //  this.shoreAnChart.clear()
      // console.log(this.apiData,this.OughtData,this.chartOptions.yAxis[0])
      this.TabAn = index;
      switch (index) {
        case 0:
          /* 应用尽用率对应的数据 */
          this.chartOptions.yAxis[0].max = 100;
          this.chartOptions.yAxis[0].interval = 25;

          this.chartOptions.yAxis[0].axisLabel = {
            show: true,
            interval: "auto",
            formatter: "{value}%",
            textStyle: { color: "#c9c9c9" },
          };
          this.clearChartDataExcept(0);
          this.chartOptions.series[0].data = this.OughtData.map(
            (item) => item.value
          );
          break;
        case 1:
          this.chartOptions.yAxis[0].max = 300;
          this.chartOptions.yAxis[0].axisLabel = {};
          this.chartOptions.yAxis[0].axisLabel = {
            show: true,
            interval: "auto",
            formatter: "{value}",
            textStyle: { color: "#c9c9c9" },
          };

          this.chartOptions.yAxis[0].interval = 100;
          this.clearChartDataExcept(1);
          this.chartOptions.series[1].data = this.apiData.map(
            (item) => item.powerTime
          );
          break;
        case 2:
          // this.yAxisMax=100;
          this.chartOptions.yAxis[0].axisLabel = {
            show: true,
            interval: "auto",
            formatter: "{value}",
            textStyle: { color: "#c9c9c9" },
          };
          // this.chartOptions.yAxis[0].max = (value)=>{
          //   return Math.ceil(value.max);
          // };

          this.clearChartDataExcept(2);
          this.chartOptions.series[2].data = this.apiData.map(
            (item) => item.shipCount
          );
          if (this.selectHas == "1001") {
            this.chartOptions.yAxis[0].max = 10;
            this.chartOptions.yAxis[0].interval = 2;
          } else {
            this.chartOptions.yAxis[0].max = 10;
            this.chartOptions.yAxis[0].interval = 2
          }
          break;
        case 3:
          this.chartOptions.yAxis[0].axisLabel = {
            show: true,
            interval: "auto",
            formatter: "{value}",
            textStyle: { color: "#c9c9c9" },
          };
          this.chartOptions.yAxis[0].max = 15000;
          // this.chartOptions.yAxis[0].max = (value)=>{
          //   console.log(Math.floor(value.max).toString().length)
          //   return Math.ceil(Math.round(value.max));
          // };
          this.chartOptions.yAxis[0].interval = 5000;
          this.clearChartDataExcept(3);
          this.chartOptions.series[3].data = this.apiData.map(
            (item) => item.powerSum
          );
          break;
      }
      this.shoreAnChart.clear();
      this.drawShoreAnChart();
      this.shorePowerChart.setOption(this.chartOptions);
    },
    // 每次切换之前先清空当前的数据
    clearChartDataExcept(index) {
      for (let i = 0; i < this.chartOptions.series.length; i++) {
        if (i !== index) {
          this.chartOptions.series[i].data = [];
        }
      }
    },
    drawShoreAnChart() {
      this.shoreAnChart = this.$echarts.init(this.$refs.shoreAn);

      this.shoreAnChart.setOption(this.chartOptions);
    },
    // 定位方法
    toship(item) {
      this.VisibleCMore = false;
      if (window.microApp) {
        // microApp.getGlobalData.PUBLIC_METHODS.childFlyTo(JSON.stringify(obj));
        window.microApp
          .getGlobalData("PUBLIC_METHODS")
          .relyFlyTo(item.mmsi, 13);
      } else {
        return;
      }
    },
    toggleLeftPanel() {
      this.isShow = !this.isShow;
      microApp
        .getGlobalData("PUBLIC_METHODS")
        .changeWidth(this.isShow, "left", 390);
    },
    // 待铅封船舶
    async showWait(boolen) {
      console.log(boolen, 'showWait')
      if (window.microApp && boolen) {
        console.log('进入未铅封')

        let code = 'greenShip,wgfw_dbpf'
        const globalData = window.microApp.getGlobalData();
        globalData.PUBLIC_METHODS.setConfigName(code)
      }

      this.showList = false;
      this.activeTab = "waitList";
      let data = {
        pageNum: 1,
        pageSize: 10,
        orgCode: this.selectHas,
        // orgCode: "1001",
        type: 0,
      };
      let res = await importDetail(data);
      this.allData = res.data.list;
      if (res.data.list.length == 0) this.showList = true;
      // this.$nextTick(() =>{
      //   this.setScroll();
      // })
      // this.setScroll();
      // this.allData = this.wait_seal_list;
    },
    // 黑名单船舶
    async showBlacklist() {
      if (window.microApp) {
        let code = 'wgfw_heimd'
        const globalData = window.microApp.getGlobalData();
        globalData.PUBLIC_METHODS.setConfigName(code)
      }
      this.showList = false;
      this.activeTab = "blacklist";
      let data = {
        pageNum: 1,
        pageSize: 10,
        orgCode: this.selectHas,
        // orgCode: "1001",
        type: 1,
      };
      let res = await importDetail(data);
      this.allData = res.data.list;
      if (res.data.list.length == 0) this.showList = true;
      // this.$nextTick(() =>{
      //   this.setScroll();
      // })
      // this.setScroll();
      // this.allData = this.back_list;
    },
    // C级船舶
    async showCList() {
      if (window.microApp) {
        let code = 'wgfw_c'
        const globalData = window.microApp.getGlobalData();
        globalData.PUBLIC_METHODS.setConfigName(code)
      }
      this.showList = false;
      this.activeTab = "CList";
      let data = {
        pageNum: 1,
        pageSize: 10,
        orgCode: this.selectHas,
        // orgCode: "1001",
        type: 2,
      };
      let res = await importDetail(data);

      this.allData = res.data.list;
      if (res.data.list.length == 0) this.showList = true;
      // this.setScroll();
      // this.$nextTick(() =>{
      //   this.setScroll();
      // })
      // this.allData = this.c_ship_list;
    },
    setScroll() {
      // 获取数据后，等待实际渲染dom后判断是否滚动
      // this.$nextTick(() => {
      const scrollListDom = document.querySelector(".scroll-list-seamless");
      if (scrollListDom) {
        const scrollListDomLast =
          scrollListDom.querySelectorAll("div")[
          scrollListDom.querySelectorAll("div").length - 1
          ];
        this.classOption = {
          limitMoveNum: 20,
          step: 0.3,
          // singleHeight: 35,
          // autoPlay为false则不自动滚动，反之则开发自动滚动
          autoPlay: scrollListDomLast.offsetTop > scrollListDom.clientHeight,
        };
        if (this.classOption.autoPlay) {
          //vueSeamless 组件的data属性如果有值，则会自动复制一分并渲染
          //所以如果需要自动滚动，才需要赋值；反之则不需要
          // this.copyData = this.dataList;
          // 手动调用组件内方法，开始自动滚动
          this.$refs.vueSeamlessRef._startMove();
        }
      }
      // });
    },
    drawShorePowerChart() {
      this.shorePowerChart = this.$echarts.init(this.$refs.shorePower);
      this.shorePowerChart.setOption(this.deliveryData);
      // window.addEventListener("resize", function () {
      //   if (this.shorePowerChart) this.shorePowerChart.resize();
      // });
    },
    async drawAlarmType() {
      // this.tabList = "TabLead";
      let res = await getlead({ orgCode: this.selectHas });
      console.log(res.wgfw_lpf ? res.wgfw_lpf : 0);
      // let wgfw_lpf=res.wgfw_lpf//零排放船舶 '1001''10011002'this.selectHas
      // let wgfw_wqf=res.wgfw_wqf//未铅封
      // let wgfw_dbpf=res.wgfw_dbpf//未完全铅封
      this.optionData = [
        {
          name: "零排放",
          value: res.wgfw_lpf ? res.wgfw_lpf : 0,
        },
        {
          name: "未铅封",
          value: res.wgfw_wqf ? res.wgfw_wqf : 0,
        },
        {
          name: "未完全铅封",
          value: res.wgfw_dbpf ? res.wgfw_dbpf : 0,
        },
      ];
      this.AlarmType = this.$echarts.init(this.$refs.showPie);
      const series = this.getPie3D(this.optionData, 0); // 可做为调整内环大小 0为实心圆饼图，大于0 小于1 为圆环
      console.log(this.selectHas);
      // window.addEventListener("resize", function () {
      //   this.AlarmType.resize();
      // });
      // 准备待返回的配置项，把准备好的series 传入。
      const option = {
        // backgroundColor: "#123756",
        legend: {
          show: true,
          // type:'scroll',
          left: 0,
          top: 0,
          bottom: 0,
          // right: "3%",
          // top: "5%",
          // orient: "vertical",
          padding: [0, 0],
          icon: "circle",
          // itemHeight: 12,
          // itemWidth: 12,
          // itemGap: 20,
          textStyle: {
            color: "#fff",
            fontSize: 12.5,
            fontWeight: "400",
          },
          formatter: (name) => {
            if (this.optionData.length) {
              const item = this.optionData.filter(
                (item) => item.name === name
              )[0];
              return `${name} `;
            }
          },
        },
        color: [
          // "#159AFF",
          // "#66E1DF",
          // "#66E193",
          // "#E3F170",
          // "#FFAD6A",
          // ----
          // '#00FF00',
          "#7CFC00",
          // "#ffe0ab",
          // "#6bc5f4",
          // "#c08ef2",
          // ---
          // '#FF0000',
          "#FF4500",
          // '#FF00FF',
          // '#FFFF00',
          // "#ffda49",
          // '#FFFF00',
          // ---
          // '#0000FF'
          "#00FFFF",
        ],
        tooltip: {
          formatter: (params) => {
            if (
              params.seriesName !== "mouseoutSeries" &&
              params.seriesName !== "pie2d"
            ) {
              let s = params.marker + params.seriesName;
              let k = option.series[params.seriesIndex].pieData.value;
              return s + "\n" + k;
            }
            return "";
          },
        },
        xAxis3D: {
          min: -1,
          max: 1,
        },
        yAxis3D: {
          min: -1,
          max: 1,
        },
        zAxis3D: {
          min: -1,
          max: 1,
        },
        grid3D: {
          show: false,
          boxHeight: 25, //修改立体饼图的高度
          top: "0%",
          // left: "-20%",
          // center: ["50%", "50%"],
          viewControl: {
            // 3d效果可以放大、旋转等，
            alpha: 35, //饼图翻转的程度
            beta: 30,
            rotateSensitivity: 1,
            zoomSensitivity: 0,
            panSensitivity: 0,
            // autoRotate: true, //是否自动旋转
            distance: 350, //距离越小看到的饼图越大
          },
        },
        series: series,
      };
      this.AlarmType.clear();
      this.AlarmType.setOption(option);
      // window.addEventListener("resize", function () {
      //   this.AlarmType.resize();
      //   });
      //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
      option.series.push({
        name: "pie2d",
        type: "pie",
        label: {
          show: true,
          position: "outside",
          // position: "inner",
          opacity: 1,
          color: "#fff",
          fontSize: 13,
          formatter: (item) => {
            if (this.optionData.length) {
              // console.log(this.optionData.length, "1111111");
              let nameWithNewLine =
                item.name.length > 5
                  ? item.name.slice(0, 5) + "\n" + item.name.slice(5)
                  : item.name;
              return nameWithNewLine + ":" + "\n" + item.value;
              // return item.name + ":" + item.value;
            }
          },
        },
        labelLine: {
          // length: 10,
          length2: 10,
          lineStyle: {
            color: "#ffffff",
            width: 1.5,
          },
        },
        startAngle: 0, //起始角度，支持范围[0, 360]。 //重要
        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["50%", "50%"],
        center: ["50%", "55%"],
        data: this.optionData,
        itemStyle: {
          opacity: 0,
        },
        // top: "-20%",
        avoidLabelOverlap: true, //防止标签重叠
      });
      this.AlarmType.setOption(option);
      // window.addEventListener("resize", function () {
      //   this.AlarmType.resize();
      //   });
    },
    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
      const midRatio = (startRatio + endRatio) / 2;
      const startRadian = startRatio * Math.PI * 2;
      const endRadian = endRatio * Math.PI * 2;
      const midRadian = midRatio * Math.PI * 2;
      // 如果只有一个扇形，则不实现选中效果。
      if (startRatio === 0 && endRatio === 1) {
        isSelected = false;
      }
      k = typeof k !== "undefined" ? k : 1 / 3;
      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
      // 鼠标滑过时外环放大大小
      const hoverRate = isHovered ? 1.05 : 1;
      // 返回曲面参数方程
      return {
        u: {
          min: -Math.PI,
          max: Math.PI * 3,
          step: Math.PI / 32,
        },

        v: {
          min: 0,
          max: Math.PI * 2,
          step: Math.PI / 20,
        },

        x(u, v) {
          if (u < startRadian) {
            return (
              offsetX +
              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          if (u > endRadian) {
            return (
              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
        },

        y(u, v) {
          if (u < startRadian) {
            return (
              offsetY +
              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          if (u > endRadian) {
            return (
              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
        },

        z(u, v) {
          if (u < -Math.PI * 0.5) {
            return Math.sin(u);
          }
          if (u > Math.PI * 2.5) {
            return Math.sin(u) * h * 0.1;
          }
          // 当前图形的高度是Z根据h（每个value的值决定的）
          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
        },
      };
    },
    getPie3D(pieData, internalDiameterRatio) {
      const series = [];

      let sumValue = 0;
      let startValue = 0;
      let endValue = 0;
      const legendData = [];
      const k =
        typeof internalDiameterRatio !== "undefined"
          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
          : 1 / 3;
      for (let i = 0; i < pieData.length; i += 1) {
        sumValue += pieData[i].value;
        const seriesItem = {
          name:
            typeof pieData[i].name === "undefined"
              ? `series${i}`
              : pieData[i].name,
          type: "surface",
          parametric: true,
          wireframe: {
            show: false,
          },
          pieData: pieData[i],
          pieStatus: {
            selected: false,
            hovered: false,
            k,
          },
        };
        if (typeof pieData[i].itemStyle !== "undefined") {
          const { itemStyle } = pieData[i];
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.color !== "undefined"
            ? (itemStyle.color = pieData[i].itemStyle.color)
            : null;
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.opacity !== "undefined"
            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
            : null;

          seriesItem.itemStyle = itemStyle;
        }
        series.push(seriesItem);
      }
      for (let i = 0; i < series.length; i += 1) {
        endValue = startValue + series[i].pieData.value;
        series[i].pieData.startRatio = startValue / sumValue;
        series[i].pieData.endRatio = endValue / sumValue;
        series[i].parametricEquation = this.getParametricEquation(
          series[i].pieData.startRatio,
          series[i].pieData.endRatio,
          false,
          false,
          k,
          10 //在此处传入饼图初始高度h
        );
        startValue = endValue;
        legendData.push(series[i].name);
      }
      return series;
    },
    // 污染物交付-分子局选择
    getdelivery(e) {
      this.shoreAnChart.clear();
      this.AlarmType.clear();
      this.shorePowerChart.clear();
      //  this.drawShorePowerChart();
      this.tabList = "TabPoll";
      // console.log(this.selectHas,e)
      delivery({ orgCode: this.selectHas }).then((res) => {
        const num = res.count.map((item) => {
          // console.log(item);
          return Math.floor(item);
        });
        // console.log(num)
        // num.forEach(item => {
        //   // console.log(item)
        //   let k=item.toString()
        //   // let i
        //   // let j
        //   // let data
        //   // console.log(k)
        //   if(item.toString().length>4){

        //     // console.log(k)
        //     let i=k.substring(0,k.length-3)
        //      let j=k.substr(-5)
        //      item=Number(i+'、'+j)
        //     //  data=Number(i+'.'+j)
        //   }

        //   // this.sliceData.push(data)
        //   // console.log(22,this.sliceData)

        // });
        num.forEach((item1, index) => {
          if (item1 == 0) {
            num[index] = null;
          }
        });
        let data = [
          {
            name: "立方米",
            value: num[0], // 设置单个柱子的样式
            itemStyle: {
              color: "#91CC75",
              shadowColor: "#91CC75",
              borderType: "dashed", // opacity: 0.5,
            },
            // text:'生活污水' EE6666
          },
          {
            value: num[1],
            name: "公斤",
            itemStyle: {
              color: "#EE6666",
              shadowColor: "#EE6666",
              borderType: "dashed", // opacity: 0.5, #91CC75
            },
          },
          {
            value: num[2],
            name: "立方米",
            itemStyle: {
              color: "#FAC858",
              shadowColor: "#FAC858",
              borderType: "dashed", // opacity: 0.5, #91CC75
            },
          },

          {
            name: "公斤",
            value: num[3], // 设置单个柱子的样式
            itemStyle: {
              color: "#5470C6",
              fontSize: 13,
              shadowColor: "#5470C6",
              borderType: "dashed", // opacity: 0.5,
              // borderRadius:[10,10,0,0]
            },
          },
        ];
        // this.sliceData.forEach((item2,index)=>{
        //   if(item2!=undefined){
        //     data[index].vlaue=item2
        //   }
        // })
        this.deliveryData.series[0].data = data;
        // this.deliveryData.series[0].data = ['10000','200000','30000','100'];
        console.log("污染物数据", this.deliveryData.series[0].data);
        this.shorePowerChart.setOption(this.deliveryData);
        // window.addEventListener("resize", function () {
        // this.shorePowerChart.resize();
        // });
      });
    },
    // 注册调用方法
    renderBoardWfglLeft() {
      this.selectHas = tool.data.get("ORGCODE");
      this.getdelivery();
      this.drawAlarmType();
      this.showWait();
      this.showBlacklist();
      this.showCList();
    },
    left() {
      // console.log(3333333333);
    },
  },
  destroyed() {
    clearInterval(this.inter);
    this.inter = null;
    clearInterval(this.setInter);
    this.setInter = null;
  },
  created() {
    // // 污染物交付
    // this.getdelivery();
  },
  mounted() {
    // localStorage.setItem('ORGCODE',"10011009")
    this.selectHas = tool.data.get("ORGCODE");
    this.showWait();
    this.getCount();
    // 月份
    this.initializeMonthList();
    this.drawShorePowerChart();
    this.drawShoreAnChart();

    this.tabList = "TabLead";
    this.getLeading();
    // this.fetchData();
    // this.getClass();
    // this.showWaitList(0)
    // 污染物交付
    // this.getdelivery();
    this.inter = setInterval(() => {
      // console.log('定时器')
      if (this.selectHas != tool.data.get("ORGCODE")) {
        this.selectHas = tool.data.get("ORGCODE");
        // if (true) {
        this.getdelivery();
        this.fetchData();
        this.getLeading();
        // this.drawAlarmType();
        this.showWait();
        this.getLeading();
        this.activeTab = "waitList";
        this.tabList = "TabLead";
        this.tabCCTV = "TabCount";
        // this.isLead='Leading'
      }
    }, 150);
    // 五分钟刷数据
    this.setInter = setInterval(() => {
      if (this.tabList == "TabWash") this.washData();
      if (this.tabList == "TabAn") this.fetchData();
      if (this.tabList == "TabLead") this.drawAlarmType();
      if (this.tabList == "TabPoll") this.getdelivery();
      if (this.activeTab == "waitList") this.showWait();
      if (this.activeTab == "blacklist") this.showBlacklist();
      if (this.activeTab == "CList") this.showCList();
      if (this.isLead == "Leading") this.getLeading();
      if (this.isLead == "LeadCount") this.leadCountEchart();
    }, 30 * 10000);
    if (window.microApp) {
      microApp.getGlobalData("PUBLIC_METHODS").changeWidth(true, "left", 390);
    }
  },
};
</script>
<style scoped>
.left {
  position: absolute;
  left: 0;
  left: 0;
  bottom: 0;
  /* //bottom: 0; */
  /* //left: 375px; */
  z-index: 100;
  width: 390px;
  /* //overflow: hidden; */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: 5px 0; */
  background-color: #132054;
  transition: left 0.3s ease-in-out;
}

.left-box {
  clear: both;
  margin: 8px 0;
  width: 375px;
  height: 97%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: #132054;
  color: #fff;
  border-radius: 10px;
  border: 2px solid #5592be;
}

.left-box .big-tit {
  /* margin-top: 2px; */
  /* margin-bottom: 2px; */
  /* background-color: limegreen; */
  height: 20px;
  /* margin-bottom: 10px; */

  width: 100%;
  background-size: cover;
  font-family: PingFang SC;
  font-size: 16px;
  font-weight: 400;
  background-repeat: no-repeat;
  /* line-height: 22.4px; */
  /* letter-spacing: 0.03em; */
  text-align: left;
  background-image: url("../assets/tit-bg.png");
  /* background-size: n; */
  /* position: ; */
  /* clear: both; */
}

.left-box .big-content {
  margin-bottom: 5px;
  padding: 5px;
  /* background-color: lightpink; */
  width: 95%;
  min-height: 30%;
}

.big-content .tit {
  height: 25px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.tit-name {
  font-weight: bold;
  margin-left: 5px;
  background: linear-gradient(to right, #226dc4, #132054);
  font-size: 16px;
  line-height: 30px;
  padding: 0 10px;
  width: 375px;
  height: 30px;
  top: 543px;
  left: 22px;
  gap: 0px;
}

.content {
  /* max-height: 30%; */
  height: 73%;
  width: 100%;
  /* background-color: #ffff43; */
  margin-top: 2px;
  overflow: hidden;
  border: 1px #2c407a solid;
}

.table-header {
  text-align: center;
  font-size: 16px;
  height: 24px;
  line-height: 24px;
  background: linear-gradient(0deg,
      rgba(17, 80, 173, 0.34) -24.83%,
      rgba(98, 140, 202, 0.0300825) 100%);
  display: flex;
  justify-content: flex-start;
  color: #c7ccd8;
}

.scroll-list-seamless {
  height: 270px;
  width: 347px;
  margin: 0 auto;
  overflow: hidden;

  /* ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li,
    a {
      padding: 0 5px;
      height: 35px;
      line-height: 35px;
      display: flex;
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 400;
      text-align: left;
    }
  } */
}

.item-container {
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.ship-name {
  text-align: center;
}

.ship-name,
.ship-id,
.mmsi {
  text-align: center;
  flex: 1;
  /* padding-left: 5px; */
}

.ship-name {
  /* padding-left: 5px; */
}

.ship-id,
.mmsi {
  /* margin-left: 10px; */
}

.position-icon {
  /* margin-right: 15px; */
}

/* .warp-bottom {
  height: 115px;
  width: 360px;
  margin: 0 auto;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li,
    a {
      padding: 0 5px;
      height: 35px;
      line-height: 35px;
      display: flex;
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 400;
      text-align: left;
    }
  }
} */

.title {
  display: flex;
  justify-content: flex-start;
}

.showButton {
  height: 60px;
  width: 40px;
  background: linear-gradient(90deg,
      rgba(130, 209, 246, 1) 0%,
      rgba(41, 182, 244, 1) 50%,
      rgba(0, 137, 205, 1) 99%);
  text-align: center;
  writing-mode: vertical-rl;
  line-height: 40px;
  position: absolute;
  right: -40px;
  top: 48%;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  border-radius: 0 5px 5px 0;
}

.btnStyle {
  background-color: transparent;
  border: none;
  padding: 0;
  font-size: 16px;
  color: #fff;
  margin-right: 10px;
}

.btnActive {
  background: linear-gradient(90deg,
      rgba(130, 209, 246, 1) 0%,
      rgba(41, 182, 244, 1) 50%,
      rgba(0, 137, 205, 1) 99%);
  border-radius: 5px;
  color: #fff;
  padding: 3px;
  margin-right: 10px;
}

.img_Box {
  display: flex;
  align-items: center;
  color: #fff;
}

.m_left {
  margin-left: 10px;
}

.info_t {
  font-size: 12px;
  margin-bottom: 10px;
}

.info_b {
  font-weight: 600;
  font-size: 24px;
  color: #ffff43;
}

.sum_content {
  display: flex;

  align-items: center;
  /* margin-top: 5px; */
  padding: 10px;
  margin: 10px 0;
  border-radius: 6px;
  background: linear-gradient(90deg,
      rgba(60, 149, 255, 0.15) 0%,
      rgba(60, 149, 255, 0.0345) 100%);
  width: 327px;
  height: 87%;
}

.component-container {
  width: 100%;
}

::v-deep ::-webkit-scrollbar {
  display: none;
}

::v-deep .more .el-dialog {
  width: 670px !important;
}

::v-deep .el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
  width: 100% !important;
  height: 100% !important;
}

::v-deep .el-input__inner {
  background: linear-gradient(to bottom, #226dc4, #132054) !important;
  border: 0px solid white;
}

::v-deep .el-date-editor .el-range-input {
  background: transparent !important;
  color: white;
  font-size: 12px !important;
}

::v-deep .el-range-editor.el-input__inner {
  padding: 0px !important;
  padding-left: 5px !important;
  /* color: red; */
}

::v-deep .el-date-editor .el-range-separator {
  font-size: 12px !important;
  line-height: 22px !important;

}

::v-deep .el-date-editor .el-range__close-icon {
  display: none !important;
}

/* ::v-deep .el-range-input{
color:red
} */
::v-deep .el-date-editor .el-range__icon {
  line-height: 22px !important;
}
</style>
